import React, {Component} from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  Platform,
  Picker,
} from 'react-native';

import Config from '../../config';
import Colors from '../../common/Colors';
import CommonStyles from '../../common/CommonStyles';
import SizeUtils from '../../common/SizeUtils';
import TImage from '../../components/TImage';
import WH_Constants from './WH_Constants';
import CommonListPage from '../common/CommonListPage';
import {DateUtils} from '../../utils/Utils';
import CommonShowPickerAction from '../../actions/common/CommonShowPickerAction';
import WH_RequestPaiHangBangAction from '../../actions/workhard/WH_RequestPaiHangBangAction';

const SORT_ARR=[
  {key:'1',name:'一级单位发帖榜'},
  {key:'2',name:'二级单位获奖榜'},
  {key:'3',name:'建议人发帖榜'},
];

const TITLEARR = ['一级单位','二级单位','建议人']

export default class WH_JDZRankView extends CommonListPage {
	constructor(props) {
      super(props);
      const date = new Date();
      this.state = {
        sub_tag:{value:date.getFullYear()},
        sub_month:{value:'全部'},
      }
      this.select_index=0;
      this.tagArr = [];
      this.tagArr.push('2018');
      this.tagArr.push('2017');
      this.monthArr = [];
      this.monthArr.push('全部');
      for (var i = 1; i <= 12; i++) {
      	this.monthArr.push(i+'');
      }
	}
	_getViewStyle() {
      return {paddingTop:Config.paddingTop,
        backgroundColor:"#ffffff"}
  	}
	_getListViewStyle() {
      return {
        width:SizeUtils.getWindowSize().width,
        paddingTop:0,
        height:(SizeUtils.getWindowSize().height - Config.paddingTop - SizeUtils.translateDesignHeightToCode(300)),
        backgroundColor:"#ff0"};
  	}
    _onRenderItem(data, index) {
    	return (
    	  <View style={{height:SizeUtils.translateDesignHeightToCode(90),
    	  	borderColor:'#eeeeee',
    	  	paddingLeft:SizeUtils.translateDesignWidthToCode(30),
    	  	paddingRight:SizeUtils.translateDesignWidthToCode(30),
    	  	flexDirection:'row',
    	  	alignItems: 'center',
            borderBottomWidth:SizeUtils.translateDesignHeightToCode(3),
    	  	}}>
    	  	<Text style={{paddingLeft:SizeUtils.translateDesignWidthToCode(30),justifyContent: 'center',width:SizeUtils.translateDesignWidthToCode(200),fontSize:SizeUtils.translateFontSizeToCode(32),color: "#666666",}}>
            	{index+1}
          	</Text>
          	<Text style={{flex:1,fontSize:SizeUtils.translateFontSizeToCode(32),color: "#666666",}}>
            	{data.by_name}
          	</Text>
          	<Text style={{width:SizeUtils.translateDesignWidthToCode(160),textAlign:'center',fontSize:SizeUtils.translateFontSizeToCode(32),color: "#666666",}}>
            	{data.num}
          	</Text>
    	  </View>
    	)
  	}
  	_onRenderTitleItem(){
  		return (
    	  <View style={{height:SizeUtils.translateDesignHeightToCode(90),
    	  	borderColor:'#eeeeee',
    	  	paddingLeft:SizeUtils.translateDesignWidthToCode(30),
    	  	paddingRight:SizeUtils.translateDesignWidthToCode(30),
    	  	flexDirection:'row',
    	  	alignItems: 'center',
            borderBottomWidth:SizeUtils.translateDesignHeightToCode(3),
    	  	}}>
    	  	<View style={{justifyContent: 'center',flexDirection:'row',alignItems: 'center',}}>
    	  		<TImage source={require("../../../resource/images/home/biaotitle.png")} style={{width:8, height:24}}/>
    	  		<Text style={{width:SizeUtils.translateDesignWidthToCode(200),marginLeft:2,fontSize:SizeUtils.translateFontSizeToCode(32),color: "#666666",}}>
            	  {'排行'}
          		</Text>
    	  	</View>
    	  	
          	<Text style={{flex:1,fontSize:SizeUtils.translateFontSizeToCode(32),color: "#666666",}}>
            	{TITLEARR[this.select_index]}
          	</Text>
          	<Text style={{width:SizeUtils.translateDesignWidthToCode(160),fontSize:SizeUtils.translateFontSizeToCode(32),color: "#666666",}}>
            	{'获奖帖数量'}
          	</Text>
    	  </View>
    	)
  	}
  	_requestData(page, listView) {
  		const year= this.state.sub_tag.value;
  		const month= this.state.sub_month.value==='全部'?'':this.state.sub_month.value;
      if (this.select_index!==2) {
        this.select_index1=0;
      }
      if (this.select_index1!==1) {
        new WH_RequestPaiHangBangAction().call(listView, {type:SORT_ARR[this.select_index].key,
        page:page, page_size:500,month:month,year:year});
      }else{
        listView.setState({viewStatus: 3,isResponeUpdate: true});
      }
    	if (this.select_index===2) {
        this.select_index1=1;
      }
  	}
  	_renderTopView(){
  	  return(
  		<View>
  		  <View style={{
  		  	height:SizeUtils.translateDesignHeightToCode(90),
  		  	flexDirection:"row",
  		    }}>
  		    <View style={{flex:1}}>{this._renderTypes()}</View>
  		    <View style={{flex:1}}>{this._renderMonthTypes()}</View>
  		  </View>
  		  <View style={{
        	  height:SizeUtils.translateDesignHeightToCode(20),
        	  backgroundColor:'#eee'}}/>
       	  <View style={{
              flexDirection:"row",
              borderColor:'#eeeeee',
              borderBottomWidth:SizeUtils.translateDesignHeightToCode(3),
              height:SizeUtils.translateDesignHeightToCode(80),
              justifyContent:"space-around",
            }}>
              {SORT_ARR.map((item,index)=> this._getSortButton(item,index) )}
          </View>
          <View style={{
        	  height:SizeUtils.translateDesignHeightToCode(20),
        	  backgroundColor:'#eee'}}/>
          {this._onRenderTitleItem()}
  		</View>
  	  );
  	}
    _getSortButton(typeData,index) {
     return (
      <TouchableOpacity
        key={typeData.key}
        onPress = {() => {
          if (this.select_index!==index) {
            this.setState({t:'df'});
            this.select_index=index;
            // this.clear();
            this.doRefresh();
          }
        }}
        style={[{
          borderColor:'#eeeeee',
          flex:1,
          alignItems: 'center',
          justifyContent: 'center',
          borderRightWidth:SizeUtils.translateDesignWidthToCode(3)
        }]}>
          <Text style={[CommonStyles.secondaryText,
              {textAlign:"center",color:index===this.select_index?'#ee3535':'#000',
              fontSize:SizeUtils.translateFontSizeToCode(30),
              backgroundColor:"#00000000", borderWidth:0,}]}>{typeData.name}
          </Text>
      </TouchableOpacity>
     )
    }
  	  //选择分类
  	_renderTypes() {
     if(Platform.OS === "ios"){
       return  (<TouchableOpacity style={{height:SizeUtils.translateDesignHeightToCode(90),alignItems: 'center',
          borderColor: '#eeeeee',flexDirection:'row',
          flex:1,
          marginLeft:SizeUtils.translateDesignWidthToCode(20),
          borderRightWidth: SizeUtils.translateDesignNumToCode(3),}}
            onPress={this._onPressChooseType.bind(this)}>
          <Text style={{fontSize:SizeUtils.translateFontSizeToCode(32)}}>
            {"年度:  "}
          </Text>
          <Text style={{flex:1,fontSize:SizeUtils.translateFontSizeToCode(32),color: "#666666",}}>
            {this.state.sub_tag.value}
          </Text>
          <TImage source={require("../../../resource/images/home/arrow.png")}
            style={{marginRight:SizeUtils.translateDesignWidthToCode(30),width:19, height:38}}/>
        </TouchableOpacity>)
      }
      else{
       return (
       <View style={{height:SizeUtils.translateDesignHeightToCode(90),
        borderColor: '#eeeeee',flexDirection:"row",alignItems:"center",
        marginLeft:SizeUtils.translateDesignWidthToCode(20),
        borderRightWidth: SizeUtils.translateDesignNumToCode(3),}}>
        <Text style={{textAlign:"center",alignItems:"center",fontSize:SizeUtils.translateFontSizeToCode(32)}}>
          {"年度:  "}
        </Text>
        <View style={{width:SizeUtils.translateDesignWidthToCode(300)}}>
       <Picker
            style={{backgroundColor:"#ffffff00"}}
            selectedValue={this.state.sub_tag.value}
            mode="dialog"
            prompt={'请选择'}
            onValueChange={(value) => this._onPickerCallback(value)}>
            {this.tagArr.map((item, index) =>
              {return(
                <Picker.Item
                style={{fontSize:SizeUtils.translateFontSizeToCode(32),color:'#eeeeee'}}
                  key={index}
                  value={item}
                  label={item}
                />
              )}
            )}

          </Picker></View></View>)
        }

    }

      //选择分类
  	_renderMonthTypes() {
     if(Platform.OS === "ios"){
       return  (<TouchableOpacity style={{height:SizeUtils.translateDesignHeightToCode(90),alignItems: 'center',
          flexDirection:'row',flex:1,
          marginLeft:SizeUtils.translateDesignWidthToCode(20),
      	  marginRight:SizeUtils.translateDesignWidthToCode(30),}}
            onPress={this._onPressMonthChooseType.bind(this)}>
          <Text style={{fontSize:SizeUtils.translateFontSizeToCode(32)}}>
            {"月度:  "}
          </Text>
          <Text style={{flex:1,fontSize:SizeUtils.translateFontSizeToCode(32),color: "#666666",}}>
            {this.state.sub_month.value}
          </Text>
          <TImage source={require("../../../resource/images/home/arrow.png")}
            style={{width:19, height:38}}/>
        </TouchableOpacity>)
      }
      else{
       return (
       <View style={{height:SizeUtils.translateDesignHeightToCode(90),
          marginLeft:SizeUtils.translateDesignWidthToCode(20),
        	}}>
        <Text style={{textAlign:"center",alignItems:"center",fontSize:SizeUtils.translateFontSizeToCode(32)}}>
          {"月度:  "}
        </Text>
        <View style={{width:SizeUtils.translateDesignWidthToCode(300)}}>
       <Picker
            style={{backgroundColor:"#ffffff00"}}
            selectedValue={this.state.sub_month.value}
            mode="dialog"
            prompt={'请选择'}
            onValueChange={(value) => this._onPressMonthChooseType(value)}>
            {this.monthArr.map((item, index) =>
              {return(
                <Picker.Item
                style={{fontSize:SizeUtils.translateFontSizeToCode(32),color:'#eeeeee'}}
                  key={index}
                  value={item}
                  label={item}
                />
              )}
            )}

          </Picker></View></View>)
        }

    }

    _onPressChooseType() {
      new CommonShowPickerAction().call(this, {pickerData:this.tagArr,
       callback:this._onPickerCallback.bind(this)});
    }
    _onPressMonthChooseType() {
      new CommonShowPickerAction().call(this, {pickerData:this.monthArr,
       callback:this._onPickerMonthCallback.bind(this)});
    }
   _onPickerMonthCallback(selectedValue) {
     this.setState({
       sub_month:{value:selectedValue},
     });
     setTimeout(()=>{
     	// this.clear();
     	this.doRefresh();
     },1000);
   }
   _onPickerCallback(selectedValue) {
     this.setState({
       sub_tag:{value:selectedValue},
     });
     setTimeout(()=>{
     	// this.clear();
     	this.doRefresh();
     },1000);
   }
}